<template>
	<view class="apply">
		<!-- <view class="advImg imgPublic">
			<image src="https://wx.gdxixiashi.com/public/images/person/bj2@2x.png"></image>
		</view> -->
		<!-- 广告文字 -->
		<!-- <view class="adv">
			<view class="txt">成为匣士</view>
			<view class="txt">赚高收益</view>
		</view>
		<view class="adv2">高收益·更灵活·更放心</view> -->
		<view class="showContent" v-html='content'></view>
		<view class="seat"></view>
		<!-- 申请按钮 -->
		<view class="bottomBtn dFlex jBetween_aCenter">
			<view class="prices dFlex jStart_aCenter">
				<view class="priceOne">原价:￥{{price2?price2:'0.00'}}</view> 
				<view class="priceOne nowPrice">￥{{price1?price1:'0.00'}}</view>
			</view>
			<view class="btns">
				<view class="btnsImg imgPublic">
					<image src="https://wx.gdxixiashi.com/public/images/person/but@2x.png" mode="widthFix"></image>
				</view>
				<view class="btnContent dFlex flexDirection jCenter_aCenter" @tap='service_flag = true'>
					<text>立即申请</text>
					<!-- <view class="count">已有{{store_count?store_count:0}}人申请</view> -->
				</view>
			</view>
		</view>
		<!-- 入驻分类弹窗 -->	
		<view class="zz dFlex jCenter_aCenter" v-if='service_flag'>
			<view class="service">
				<view class="title">信息填写</view>
				<view class="content">
					<view class='info'>
						<view class="info_title">营业执照</view>
						<view class="info_val">
							<view class="upImg imgPublic" @click='checkchoose'>
								<image v-if='image' :src='imgDomain + image' mode="widthFix"></image>
								<image v-else src="https://wx.gdxixiashi.com/public/images/person/comment_up.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<view class='info'>
						<view class="info_title">认证视频</view>
						<view class="info_val">
							<view class="upVid" @click='chooseVid'>
								<!-- <video v-if='video' :src='imgDomain + video'></video> -->
								<text v-if='video'>认证视频上传成功</text>
								<image v-else src="https://wx.gdxixiashi.com/public/images/person/comment_up.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<view class='info'>
						<view class="info_title">服务分类</view>
						<view :class="['serviceOne',sel_service == item.styleId?'active':'']" @click='sel_service = item.styleId' v-for="(item,index) in serviceList" :key='item.styleId'>{{item.style_name}}</view>
					</view>
				</view>
				<view class="btns dFlex jAround_aCenter">
					<view class="btn" @click='service_flag = false'>再考虑考虑</view>
					<view class="btn sure" @click='apply'>提交</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				is_ok:'',
				content:'',
				
				price1:'',
				price2:'',
				store_count:'',
				
				service_flag:false,
				serviceList:[],
				sel_service:'',
				image:'',
				video:"",
				imgDomain:getApp().globalData.imgDomain,
				is_show_pay:2,
				showPermission:false,
			};
		},
		onLoad() {
			this.initContent();
		},
		onShow(){
			this.initUser();
			this.sel_service = '';
		},
		onShareAppMessage() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		methods:{
			initUser(){
				this.tool.getUserInfo().then(res=>{
					// #ifdef APP-PLUS
					this.is_ok = res.is_ok;
					// #endif
					this.store_count = res.store_count;
				}).catch(err=>{
					console.log(err);
				})
			},
			initContent(){
				this.tool.getData('User/addstoreindex',{}).then(res=>{
					console.log(res);
					if(res){
						this.serviceList = res.list;
						this.price1 = res.store_price1;
						this.price2 = res.store_price2;
						this.content = res.store_rule;
						this.is_show_pay=res.is_show_pay;
					}
				}).catch(err=>{
					
				})
			},
			// 上传视频
			chooseVid(){
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success:(res)=>{
						if(res.tempFilePath){
							this.tool.upImg(res.tempFilePath).then(file=>{
								if(file){
									this.video = file.image_path;
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					},
					fail:(err)=>{
						console.log(err);
					}
				})
			},
			checkchoose(){
				// #ifdef APP-PLUS
				if(!uni.getStorageSync('is_upload')){
					uni.showModal({
						title:'权限申请说明',
						content:'本次申请使用您的相机和存储权限用于上传营业执照，是否同意',
						success:(op)=>{
							if(op.confirm){
								this.chooseImg()
							}
						},
					})
				}else{
					this.chooseImg()
				}
				// #endif
				
				// #ifdef MP-WEIXIN
				this.chooseImg()
				// #endif
			},
			// 上传图片
			chooseImg(){
				// #ifdef MP-WEIXIN
				uni.chooseMedia({
					count:1,
					mediaType:['image'],
					sourceType:['album', 'camera'],
					sizeType:['original', 'compressed'],
					success:(info)=>{
						if(info.tempFiles.length){
							this.tool.upImg(info.tempFiles[0].tempFilePath).then(res=>{
								if(res){
									this.image = res.image_path;
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					},
					fail:(err)=>{
						console.log(err);
					}
				})
				// #endif
				// #ifdef APP-PLUS
				uni.chooseImage({
					count:1,
					sourceType:['album', 'camera'],
					sizeType:['original', 'compressed'],
					success:(info)=>{
						uni.setStorageSync('is_upload',1);
						if(info.tempFiles.length){
							this.tool.upImg(info.tempFiles[0].path).then(res=>{
								if(res){
									this.image = res.image_path;
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					},
					fail:(err)=>{
						console.log(err);
					}
				})
				// #endif
			},
			// 申请成为洗匣士
			apply(){
				// #ifdef APP-PLUS
				if(this.is_ok != '2'){
					uni.showToast({
						title:'请先完成实名认证',
						icon:"none"
					})
					setTimeout(()=>{
						uni.redirectTo({
							url:'./unAuthen'
						})
					},1650)
					return;
				}
				// #endif
				if(!this.sel_service){
					uni.showToast({
						title:'请选择服务类型',
						icon:"none"
					})
					return;
				}
				if(!this.image){
					uni.showToast({
						title:'需上传营业执照',
						icon:"none"
					})
					return;
				}
				if(!this.video){
					uni.showToast({
						title:'需上传认证视频',
						icon:"none"
					})
					return;
				}
				var itemList2 = [];
				if(this.is_show_pay == 1){
					itemList2 = ['微信支付','支付宝支付'];
				}else{
					itemList2 = ["余额"];
				}
				
				uni.showActionSheet({
					// #ifdef MP-WEIXIN
					itemList :['微信支付'],
					// #endif
					
					// #ifdef APP-PLUS
					itemList :itemList2,
					// #endif
					success: (op) => {
						let pay_method = 1;
						if(op.tapIndex == 0){
							// #ifdef MP-WEIXIN
							pay_method = 2;	
							// #endif
							// #ifdef APP-PLUS
							if(this.is_show_pay == 1){
								pay_method = 4;
							}else{
								pay_method = 1;
							}
							// #endif
						}else if(op.tapIndex == 1){
							pay_method = 3;
						}
						this.tool.getData('User/addstore',{
							memberId:uni.getStorageSync('userId'),
							pay_method:pay_method,
							styleId:this.sel_service,
							image:this.image,
							video:this.video,
						}).then(res=>{
							console.log(res);
							this.service_flag = false;
							if(res){
								this.service_flag = false;
								if(pay_method == '2' || pay_method == '4'){
									uni.requestPayment({
										provider:'wxpay',
										timeStamp:res.weixin.timeStamp,
										nonceStr:res.weixin.nonceStr,
										package:res.weixin.package,
										signType:res.weixin.signType,
										paySign:res.weixin.paySign,
										success: () => {
											uni.showToast({
												title:'申请已提交',
												icon:"success"
											})
											setTimeout(()=>{
												this.tool.back();
											},1650)
										},
										fail:(err)=>{
											console.log(err);
											uni.showToast({
												title:'支付失败',
												icon:"none"
											})
										}
									})
								}else if(pay_method == '3'){
									uni.requestPayment({
										provider:'alipay',
										orderInfo:res.alipay,
										success: () => {
											uni.showToast({
												title:'申请已提交',
												icon:"success"
											})
											setTimeout(()=>{
												this.tool.back();
											},1650)
										},
										fail:(err)=>{
											console.log(err);
											uni.showToast({
												title:'支付失败',
												icon:"none"
											})
										}
									})
								}else if(pay_method == '1'){
									uni.showToast({
										title:'申请已提交',
										icon:"success"
									})
									setTimeout(()=>{
										this.tool.back();
									},1650)
								}
							}
						}).catch(err=>{
							console.log(err);
						})
					},
					fail:(err)=>{
						console.log(err);
					}
				})
				
			}
		}
		
	}
</script>

<style lang="scss">
	/*每个页面公共css*/
	@font-face {
		font-family:'itemFont';
		src: url('http://app.gdxixiashi.com/AaHouDiHei.ttf');
	}
	page{
		width: 100%;
		height: 100%;
	}
	.apply{
		width: 100%;
		height: 100%;
		position: relative;
		.service{
			width:90%;
			max-height: 80vh;
			background:white;
			border-radius: 4px;
			overflow: hidden;
			overflow-y: auto;
			.btns{
				width:100%;
				.btn{
					width:50%;
					padding:10px 0;
					text-align: center;
					font-size: 13px;
					color: #666666;
				}
				.sure{
					background: #1664FF;
					color:white;
				}
			}
			.content{
				width:100%;
				padding:12px;
				box-sizing: border-box;
				.info{
					width:100%;
					margin-bottom:10px;
					.info_title{
						width: 100%;
						margin-bottom: 8px;
					}
					.upVid{
						width:120px;
						margin:0 auto;
						text-align: center;
						color:#1664FF;
					}
					.upImg{
						width: 120px;
						margin:0 auto;
					}
					.serviceOne{
						display: inline-block;
						width:calc((100% - 24px) / 3);
						margin-right: 12px;
						text-align: center;
						margin-bottom: 12px;
						padding:6px 0;
						border-radius: 50px;
						border:1px solid #909399;
						box-sizing: border-box;
						color:#666666;
						font-size:13px;
					}
					.active{
						background: #1664FF;
						color:white;
						border-color: #1664FF;
					}
					.serviceOne:nth-child(3n + 4){
						margin-right: 0;
					}
				}
				.info:last-child{
					margin:0;
				}
			}
			.title{
				width:100%;
				padding:12px 0;
				text-align: center;
				border-bottom: 1px solid rgba(0,0,0,0.1);
			}
		}
		.showContent{
			width:100%;
			padding:12px;
			box-sizing: border-box;
		}
		.adv2{
			width: 72%;
			position:absolute;
			left: 14%;
			top: 28%;
			text-align: center;
			color: white;
			font-size: 17px;
			font-weight: 500;
			color: #ffffff;
			line-height: 60px;
			letter-spacing: 10px;
		}
		.adv{
			width: 74%;
			position:absolute;
			left: 13%;
			top: 8%;
			color: white;
			font-family: 'itemfont';
			font-weight: bold;
			font-size: 65px;
			text-align: center;
			line-height: 72px;
			letter-spacing: -5.92px;
			text-shadow: 0px 2.5px 2.5px 0px rgba(249,139,41,0.75); 
		}
		.bottomBtn{
			width: 100%;
			position: fixed;
			bottom:0;
			left:0;
			padding:6px 12px;
			box-sizing: border-box;
			background: white;
			.prices{
				width: max-content;
				font-size:12px;
				.priceOne{
					color:#909399;
					text-decoration: line-through;
				}
				.nowPrice{
					text-decoration: none;
					font-size: 16px;
					font-weight: bold;
					color:#FF0000;
					margin-left: 10px;
				}
			}
			.btns{
				width: 57.8%;
				position:relative;
				.btnContent{
					width: 100%;
					height: 100%;
					text-align: center;
					position: absolute;
					top: 0;
					left: 0;
					text-align: center;
					color: #DA3434;
					font-size: 16px;
					font-weight: bold;
					.count{
						font-size: 12px;
						margin-top: 2px;
						font-weight: 400;
					}
				}
			}
		}
		.advImg{
			width: 100%;
			height: 100%;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
